$(function () {
  pieChar()
  barChar([20, 60, 82, 60])
  echarts_1_init()
  linchar()
  //barschar();
	senlin_chart(),
  radarchar()
  progress1char()
  mapchar()
})
window.onresize = function () {
  pieChart.resize()
  barChart.resize() //若有多个图表变动，可多写
  echarts_1.resize()
  linchart.resize()
	senlinChart.resize();
  radarchart.resize()
  progress1chart.resize()
  mapchart.resize()
}
//饼状图
var pieChart = ''
function pieChar() {
  pieChart = echarts.init(document.getElementById('pie-chart'))
  option = {
    color: ['#4f8bf9', '#fea31e', '#959595'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}个 ({d}%)',
    },
    legend: {
      y: 'bottom',
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '60%'],
        center: ['50%', '50%'],
        label: {
          normal: {
            position: 'outside',
            formatter: '{b}:{d}%',
          },
        },
        data: [
          { value: 79, name: '滑坡' },
          { value: 20, name: '崩塌', selected: true },
          { value: 1, name: '地面塌陷' },
        ],
      },
    ],
  }
  pieChart.setOption(option)
}

//柱状图
var barChart = ''
function barChar(data) {
  barChart = echarts.init(document.getElementById('bar-chart'))
  let option = {
    color: ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
      },
      formatter: '{b}：{c}个'
    },
    grid: {
      top: '5%',
      left: '3%',
      right: '10%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: '#bac0c0',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
    },
    yAxis: {
      type: 'category',
      data: ['分散农户', '村道', '聚居地', '景区', '公路', '寺庙', '学校'],
      axisLabel: {
        textStyle: {
          color: '#bac0c0',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          barBorderRadius: [10, 0, 0, 10],
        },
        emphasis: {
          focus: 'series',
        },
        data: [89, 2, 5, 0, 0, 0, 0],
      },
    ],
  }
  barChart.setOption(option)
}

// 地灾规模等级及数量
var echarts_1 = ''
function echarts_1_init() {
  echarts_1 = echarts.init(document.querySelector('#echarts_1'))
  let option = {
    color: ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}个 ({d}%)',
    },
    legend: {
      y: 'bottom',
      data: ['小型', '中型', '大型'],
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 6,
      itemGap: 10,
      textStyle: {
        color: '#bac0c0',
        fontWeight: 'normal',
        fontSize: 12,
      },
    },
    series: [
      {
        name: '隐患点类型',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '50%'],
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10,
        },
        // 引导线调整
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 5,
        },
        // roseType: "radius",
        data: [
          { value: 99, name: '小型' },
          { value: 1, name: '中型' },
          { value: 0, name: '大型' },
        ],
      },
    ],
  }
  echarts_1.setOption(option)
}

//折线图
var linchart = ''
function linchar() {
  linchart = echarts.init(document.getElementById('line-chart'))
  const option = {
		color: ['#fd8f1e', '#7cb5ec', '#4280f1', '#957bde'],
		tooltip: {
			trigger: 'axis',
			formatter: function (params) {
				let str = params[0].name + '<br/>'
				params.forEach((item) => {
					str +=
						item.marker +
						item.seriesName +
						'：' +
						item.value +
						'公顷<br/>'
				})
				return str
			},
		},
		grid: {
			top: 10,
			left: '3%',
			right: '4%',
			bottom: 0,
			containLabel: true,
		},
		legend: {
			data: ['公益林', '商品林', '非林地上造林地'],
			icon: 'circle',
			itemWidth: 10,
			itemHeight: 6,
			itemGap: 10,
			orient: 'horizontal',
			x: 'right',
			y:'top',
			textStyle: {
				color: '#fff',
				fontSize: '12',
			},
		},

		calculable: true,
		xAxis: [
			{
				type: 'category',
				data:  ['万安', '金山', '白马关', '新盛', '鄢家', '略坪', '调元'],
				axisLabel: {
					textStyle: {
						color: '#bac0c0',
						fontWeight: 'normal',
						fontSize: 12,
					},
					interval: 0,
					rotate: 15,
				},
				// x轴线的颜色为   rgba(255,255,255,.2)
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
			},
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					textStyle: {
						color: '#bac0c0',
						fontWeight: 'normal',
						fontSize: 12,
					},
					interval: 0,
				},
				// x轴线的颜色为   rgba(255,255,255,.2)
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
			},
		],
		series: [
			{
				name: '公益林',
				type: 'bar',
				barWidth: '50%',
				stack:'total',
				data: [230, 233, 501, 305, 250, 210, 298],
			},
			{
				name: '商品林',
				type: 'bar',
				barWidth: '50%',
				stack:'total',
				data: [331, 655, 677, 453, 214, 278, 568],
			},
			{
				name: '非林地上造林地',
				type: 'bar',
				barWidth: '50%',
				stack:'total',
				data: [221, 331, 332, 361, 321, 675, 212],
			}
		],
	}
  linchart.setOption(option)
}
//柱状图2
var barschart = ''
function barschar() {
  barschart = echarts.init(document.getElementById('bars-chart'))
  option = {
    color: ['#fd8f1e', '#7cb5ec', '#4280f1', '#957bde'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: '10%',
      right: '15%',
      bottom: '20%',
      top: '20%',
      containLabel: true,
      z: 22,
    },

    legend: {
      data: ['强降雨', '持续降雨', '高温', '低温'],
      textStyle: {
        fontSize: 12,
        color: '#fff',
      },
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 10,
      bottom: '9%',
    },

    xAxis: {
      name: '次数',
      nameTextStyle: {
        color: '#fff',
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
      },
      splitLine: {
        lineStyle: {
          color: '#24214e',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#24214e',
          width: '1  ', //坐标线的宽度
        },
      },
    },
    yAxis: {
      data: ['2020.11', '2020.12', '2021.01', '2021.02', '2021.03'],
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 12, //坐标值得具体的颜色
        },
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#24214e',
          width: '1  ', //坐标线的宽度
        },
      },
    },
    series: [
      {
        name: '强降雨',
        type: 'bar',
        stack: '总量',
        barWidth: 20,
        label: {
          normal: {
            show: false,
            position: 'insideRight',
          },
        },
        data: [6, 4, 10, 8, 7],
      },
      {
        name: '持续降雨',
        type: 'bar',
        barWidth: 20,
        stack: '总量',
        label: {
          normal: {
            show: false,
            position: 'insideRight',
          },
        },
        data: [8, 10, 4, 5, 6],
      },
      {
        name: '高温',
        type: 'bar',
        stack: '总量',
        barWidth: 20,
        label: {
          normal: {
            show: false,
            position: 'insideRight',
          },
        },
        data: [6, 4, 10, 8, 7],
      },
      {
        name: '低温',
        type: 'bar',
        stack: '总量',
        barWidth: 20,
        label: {
          normal: {
            show: false,
            position: 'insideRight',
          },
        },
        data: [6, 4, 10, 8, 7],
      },
    ],
  }
  barschart.setOption(option)
}

var senlinChart = ''
function senlin_chart(params) {
	senlinChart = echarts.init(document.getElementById('senlin-chart'))
	let option = {
    color: ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F', '#ff9f7f', '#9fe6b8'], //'#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    tooltip: {
      trigger: 'item',
      formatter: '{b} : 占比{d}%',
    },
    legend: {
      y: 'bottom',
      data: ['万安', '金山', '白马关', '新盛', '鄢家', '略坪', '调元'],
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 6,
      itemGap: 10,
      textStyle: {
        color: '#bac0c0',
        fontWeight: 'normal',
        fontSize: 12,
      },
    },
    series: [
      {
        name: '隐患点类型',
        type: 'pie',
        radius: ['0', '60%'],
        center: ['50%', '40%'],
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10,
        },
        // 引导线调整
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 5,
        },
        data: [
          { value: 10, name: '万安' },
          { value: 16, name: '金山' },
          { value: 20, name: '白马关' },
          { value: 15, name: '新盛' },
          { value: 10, name: '鄢家' },
          { value: 15, name: '略坪' },
          { value: 14, name: '调元' },
        ],
      },
    ],
  }
	senlinChart.setOption(option)
}

//雷达图
var radarchart = ''
function radarchar() {
  radarchart = echarts.init(document.getElementById('radar-chart'))
  option = {
    color: ['#623ad1', '#3383fc'],
    tooltip: {
      formatter: function (params) {
        console.log(params);
      }
		},
    radar: [
      {
        indicator: [
          {
            text: '加强检测预警',
            max: 100,
          },
          {
            text: '专人监测',
            max: 100,
          },
          {
            text: '设立警示标志',
            max: 100,
          },
          {
            text: '救灾和撤离准备',
            max: 100,
          },
          {
            text: '开展排位工程',
            max: 100,
          },
          {
            text: '开展专业检测工程',
            max: 100,
          },
        ],
        center: ['50%', '50%'],
        radius: '65%',
        startAngle: 90,
        name: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12, //外圈标签字体大小
            color: '#FFF', //外圈标签字体颜色
          },
        },
        splitArea: {
          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: {
            // 分隔区域的样式设置。
            color: [], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          },
        },
        axisLine: {
          //指向外圈文本的分隔线样式
          lineStyle: {
            color: '#24214e',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#fff', // 分隔线颜色
            width: 1, // 分隔线线宽
          },
        },
      },
    ],
    series: [
      {
        name: '雷达图',
        type: 'radar',
        data: [
          {
            name: '2020',
            value: [ 99, 99, 99, 99, 39, 11],
            label: {
              show: true,
              color: '#EC342F',
              fontSize: 12,
              formatter: function (params) {
                  return params.value + '个';
              }
            },
            symbolSize: 4,
            areaStyle: {
              normal: {
                // 单项区域填充样式
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#3cd2f3',
                    },
                    {
                      offset: 1,
                      color: '#306eff',
                    },
                  ],
                  globalCoord: false,
                },
                opacity: 0.5, // 区域透明度
              },
            },
          },
        ],
      },
    ],
  }
  radarchart.setOption(option)
}
//进度条1
var progress1chart = ''
function progress1char() {
  progress1chart = echarts.init(document.getElementById('progress1-chart'))
  const option = {
		color: ['#fd8f1e', '#7cb5ec', '#4280f1', '#957bde'],
		tooltip: {
			trigger: 'axis',
			formatter: '{b}：{c}个',
		},
		grid: {
			top: 30,
			left: '3%',
			right: '4%',
			bottom: 0,
			containLabel: true,
		},
		legend: {
			data: ['安全水位', '当前水位'],
			icon: 'circle',
			itemWidth: 10,
			itemHeight: 6,
			itemGap: 10,
			orient: 'horizontal',
			x: 'center',
			// y:'bottom',
			textStyle: {
				color: '#fff',
				fontSize: '12',
			},
		},

		calculable: true,
		xAxis: [
			{
				type: 'category',
				data: [
					'白马关镇',
					'金山镇',
					'鄢家镇',
					'调元镇',
					'万安镇',
					'新盛镇',
					'略坪镇',
				],
				axisLabel: {
					textStyle: {
						color: '#bac0c0',
						fontWeight: 'normal',
						fontSize: 12,
					},
					interval: 0,
					rotate: 15,
				},
				// x轴线的颜色为   rgba(255,255,255,.2)
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
			},
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					textStyle: {
						color: '#bac0c0',
						fontWeight: 'normal',
						fontSize: 12,
					},
					interval: 0,
				},
				// x轴线的颜色为   rgba(255,255,255,.2)
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)',
					},
				},
			},
		],
		series: [
			{
				type: 'bar',
				barWidth: '50%',
				data: [33, 20, 13, 12, 9, 8, 4],
			},
		],
	}

  progress1chart.setOption(option)
}
//点击切换数据
function DataSwitch(obj, num) {
  $(obj).removeClass('Datasame')
  $(obj).siblings().addClass('Datasame')
  if (num == 1) {
    $(obj).parent().prev().addClass('Defaultgray')
    $(obj).parent().next().removeClass('Defaultgray')

    barChar([100, 20, 60, 81])
  } else {
    barChar()
    $(obj).parent().prev().removeClass('Defaultgray')
    $(obj).parent().next().addClass('Defaultgray')
    barChar([10, 20, 50, 81])
  }
}
